<template>
	<view class="">
		<successVue :Visible="Visible" @isModal="isModal" />
		<view class="title">
			<alltitleVue :title="title" :url="url" />
			<view class="item-box">
				<view class="title-item" v-for="(item,index) in itemList" :class="{'isindex':isindex==index}"
					@click="itemClick(item,index)">
					{{item.name}}

				</view>
			</view>

		</view>


		<view class="">
			<view class="box boxs" v-if="isindex==0">
				<view class="box-bot box-flex">
					<view class="">
						反馈机构
					</view>
					<view class="">
						成都西南中医医院
					</view>
				</view>
				<view class="box-bot">
					<textarea name="" placeholder="请描述您遇到的问题，并输入您的姓名、联系电话" v-model="params.content" id="" cols="30"
						rows="10"></textarea>
				</view>
				<view class="box-bot">
					<view class="bot-tit">
						请提供问题相关截图便于客服客服了解情况
					</view>
					<u-upload :action="action" :header="uploadHeaders" :file-list="fileList"
						@on-success="handleUploadSuccess" @fail="handleUploadFail"></u-upload>
				</view>
				<view class="" @click="sumbit">
					<allBtnVue :btnText="btnText" />
				</view>
			</view>
			<view class="box" v-else>
				<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-left" @scrolltoupper="upper"
					@scrolltolower="lower">
					<view v-if="itemList.length>0" style="margin: 24rpx;">
						<view class="answer" v-for="(item,index) in Answer" :key="item.id" @click="department(item)">
							<view class="answer-top answer-flex">
								<view class="">
									反馈时间：
								</view>
								<view class="">
									{{item.createTime}}
								</view>
							</view>
							<view class="answer-text answer-flex">
								<view class="">
									反馈机构
								</view>
								<view class="">
									成都西南中医医院
								</view>
							</view>

							<view class="answer-text answer-flex">
								<view class="">
									反馈渠道
								</view>
								<view class="">
									成都西南中医医院微信小程序
								</view>
							</view>
							<view class="answer-last">
								<view class="answer-text answer-flex ">
									<view class="">
										反馈描述
									</view>
									<view class="">
										{{item.content}}
									</view>
								</view>
								<!-- <view class="img-box" v-if="item.contentPhoto && item.contentPhoto.length">
									<view v-for="(it, ind) in (item.contentPhoto ? item.contentPhoto.split(',') : [])"
										:key="ind">
										<image @click="openImage(it)" :src="it" mode=""></image>
									</view>
								</view> -->




							</view>


							<view class="answer-bot">
								<view class="" @click="department(item)">
									查看详情
								</view>

							</view>

						</view>
					</view>
					<u-empty v-else text="暂无数据" mode="list"></u-empty>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	import successVue from "../../components/success.vue";
	import config from "../../utils/config";
	import {
		addOpinion,

		getopinion
	} from '../../service/api.js'
	import allBtnVue from '../../components/allBtn.vue';
	import {
		toast,
		getStore
	} from "../../utils";
	export default {
		computed: {
			// 动态构建上传的 header
			uploadHeaders() {
				return {
					Authorization: `Bearer ${this.token}`, // 把 token 加到请求头中
					'Custom-Header': 'CustomValue', // 如果需要其他自定义头部，添加这里
					"clientid": "af80f6d0dc2d2f09587d2bd25e384d84"
				};
			}
		},
		components: {
			allBtnVue,
			successVue
		},
		onShow() {
			this.token = getStore('token')
		},
		data() {
			return {
				Visible: false,
				btnText: "提交",
				params: {
					content: "",
				},
				token: '',

				isindex: 0,
				title: "意见反馈",
				action: config.host + 'resource/oss/upload',
				Answer: [],
				itemList: [{
					name: "新建反馈"
				}, {
					name: "历史记录"
				}]
			}
		},
		onLoad(options) {
			if (options.index) {
				this.isindex = options.index;
			}

			this.getAnswer();
		},
		methods: {
			//关闭弹窗
			isModal(item) {
				this.Visible = item;
			},
			//上传图片成功处理格式
			handleUploadSuccess(response, file, fileList) {
				if (response && response.data && response.data.url) {
					// 如果 `this.params[this.index].photo` 存在并且是一个字符串，则拼接新的 URL
					if (this.params.contentPhoto) {
						// 检查是否已经有 URL，如果有，则用逗号拼接
						this.params.contentPhoto += ',' + response.data.url;
					} else {
						// 如果没有 URL，则直接赋值
						this.params.contentPhoto = response.data.url;
					}
					console.log(this.params.contentPhoto); // 输出拼接后的 URL 字符串
				}
			},




			// 点击图片时触发的函数
			openImage(it) {
				// 这里可以做跳转或显示更大的图片
				uni.navigateTo({
					url: it
				});
			},
			async sumbit() {
				if (this.params.content == "") {
					toast("请输入你要的反馈")
					return
				}
				let res = await addOpinion(this.params);
				if (res.code == 200) {
					this.getAnswer();
					this.Visible = true
				}

			},



			async getAnswer() {
				let res = await getopinion();
				if (res.code == 200) {
					this.Answer = res.rows;

				}

			},
			itemClick(item, index) {
				this.isindex = index;
			},
			department(item, index) {
				console.log(item, "")
				uni.navigateTo({
					url: '/My/ComplaintDetails/index?id=' + item.id

				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F5F3F0;
		// padding: 24rpx;

		.scroll-Y {
			width: 100%;
			height: calc(100vh - 330rpx);
		}

		.box-left {

			border-radius: 16rpx;

			.left {
				background: #fff;
				margin-bottom: 24rpx;
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

		}
	}

	.boxs {
		padding: 24rpx;
	}

	.item-box {
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		color: #000000;

		.title-item {
			width: 128rpx;
			text-align: center;
			padding: 24rpx 0;

		}

		.isindex {
			border-bottom: 4rpx solid #CCA566;
		}
	}

	.answer {

		margin-bottom: 24rpx;
		padding: 24rpx;

		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.answer-flex {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.answer-top {
			font-weight: 500;
			font-size: 32rpx;
		}

		.answer-text {
			font-size: 24rpx;

			color: #4D4D4D;

			view:first-child {
				margin-right: 48rpx;
				color: #B3B3B3;
			}
		}

		.answer-last {
			border-bottom: 1rpx solid #E6E6E6;

			margin-bottom: 0;
		}

		.img-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			image {
				height: 200rpx;
				width: 200rpx;
			}
		}

		.answer-bot {
			margin-top: 24rpx;
			display: flex;
			justify-content: flex-end;

			view {
				font-size: 24rpx;
				width: 144rpx;
				height: 56rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #E6E6E6;
				text-align: center;
				line-height: 56rpx;
			}

			view:last-child {
				margin-left: 16rpx;
				color: #CCA566;
				border: 1rpx solid #CCA566;
			}
		}
	}

	.box-bot {
		width: 654rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 24rpx;
		font-size: 24rpx;

		.bot-tit {
			margin-bottom: 20rpx;
		}
	}

	.box-flex {
		display: flex;

		view:first-child {
			color: #4D4D4D;
		}

		view:last-child {
			margin-left: 30rpx;
		}
	}

	.title {
		background: #fff;
	}

	::deep.u-add-tips {
		display: none !important;
	}
</style>